<template>
  <div class="page-goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="f1 right-container">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="good-item">
          <h3 class="title">{{ item.name }}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card
              v-for="subItem in item.foods"
              :key="subItem.id"
              num="2"
              :price="subItem.price"
              :desc="subItem.goodsDesc"
              :title="subItem.name"
              :thumb="subItem.imgUrl"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//
import { mapGetters, mapState } from "vuex";
//引入bs
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
      loading: false, //左侧没有点击时为false
    };
  },
  mounted() {},
  methods: {
    //左侧点击菜单
    handleClick(index) {
      this.activeKey = index;
      //获取nodeList节点
      const goodsNodes = document.querySelectorAll(".good-item");
      //右侧滚动
      this.bs2.scrollToElement(goodsNodes[this.activeKey], 200);
      this.loading = true;
    },
    //渲染滚动
    renderScroll() {
      this.$nextTick(() => {
        this.bs1 = new BScroll(".navs", {
          click: true,
        });

        this.bs2 = new BScroll(".right-container", {
          click: true,
          probeType: 3, //  3 派发滚动事件
        });

        const goodsNodes = document.querySelectorAll(".good-item");
        //获取dom节点全部的good-item
        goodsNodes.forEach((e) => {
          //  console.log(e.clientHeight); //查看盒子全部高度
          this.heightList.push(e.clientHeight);
        });

        this.bs2.on("scroll", ({ y }) => {
          if (this.loading) return;
          let Y = Math.abs(y);
          //  console.log(y); //滑动时查看高度
          /* 
              索引0  y>0 && y<1盒子
              索引1  y>1盒子 && y<1+2 盒子
              索引2  y>1+2盒子 && y<1+2+3 盒子
              大于前面盒子的和<前面盒子的和+自己高度
            */
          this.heightList.reduce((total, cur, index) => {
            if (Y > total && Y < total + cur) {
              this.activeKey = index; //赋值左边索引
            }
            return total + cur; //
          }, 0);
        });
        this.bs2.on("scrollEnd", () => {
          this.loading = false;
        });
      });
    },
  },
  computed: {
    ...mapGetters("shop", ["navList"]),
    ...mapState("shop", ["goodsList"]),
  },
  async created() {
    //发送请求
    await this.$store.dispatch("shop/A_getGoodsData");
    //渲染滚动
    this.renderScroll();
  },
};
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
}
.title {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
.van-sidebar-item {
  width: 100%;
  border-radius: 10px;
  margin: 5px;
  color: rgb(235, 236, 236);
  background: #cc8540;
}
</style>